<template>
	<el-dialog
		v-model="dialogOverflowVisible"
		title="公告信息"
		width="500"
		draggable
		overflow
		:close-on-click-modal="false"
	>
		<div class="cart">
			<el-input
				v-model="inputValue"
				class="searchInput"
				style="width: 240px"
				placeholder="搜索区域名称"
			/>
			<div class="resultTable">
				<el-table :data="renderData" stripe style="width: 100%">
					<el-table-column
						prop="name"
						label="区域名称"
						width="180"
						show-overflow-tooltip
					/>
					<el-table-column prop="phone" label="物业电话" />
				</el-table>
				<!-- 分页器 -->
				<el-pagination
					size="small"
					background
					layout="prev, pager, next"
					:total="total"
					:page-size="limit"
					@current-change="handleCurrentChange"
				/>
			</div>
			<div class="notice">
				<div>
					<span>公告标题：</span>
					<br />
					<el-input
						v-model="noticeTitile"
						style="width: 80%"
						placeholder="请输入公告标题"
					/>
				</div>
				<div>
					<span>公告内容：</span>
					<br />
					<el-input
						v-model="noticeContent"
						style="width: 80%"
						:rows="2"
						type="textarea"
						placeholder="请输入公告内容"
					/>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogOverflowVisible = false"
					>取消</el-button
				>
				<el-button :plain="true" type="primary" @click="handlePublish">
					发布
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, computed } from 'vue'
import { addNoticeHttp } from '@/request/request'
import { ElMessage } from 'element-plus'
const emit = defineEmits('update:modelValue')
const { proxy } = getCurrentInstance()
//接收来自父组件v-model的dialogVisible
const props = defineProps({
	dialogVisible: {
		type: Boolean,
	},
	resultData: {
		type: Array,
		default: [],
	},
})
const dialogOverflowVisible = computed({
	get: () => {
		return props.dialogVisible
	},
	set: (value) => {
		emit('update:modelValue', value)
	},
})
let inputValue = ref(null) //输入框的值
let map = null
//分页渲染数据
const limit = 3
const currentPage = ref(1)
const total = ref(0)
//改变页码事件回调
const handleCurrentChange = (val) => {
	currentPage.value = val
}
//公告数有计算属性得到
const renderData = computed({
	get: () => {
		//如果搜索框有值,则过滤搜索结果
		let temp = props.resultData
		let keyword = inputValue.value
		if (keyword) {
			temp = props.resultData.filter((item) => {
				return (
					item.name.includes(keyword) || item.phone.includes(keyword)
				)
			})
		}
		//记录分页信息
		total.value = temp.length
		const start = (currentPage.value - 1) * limit
		const end = start + limit
		return temp.slice(start, end)
	},
	set: (value) => {
		console.log(value)
	},
})
//公告
const noticeTitile = ref('')
const noticeContent = ref('')
//发布公告确定事件回调
const handlePublish = () => {
	//确定公告的完整性
	if (noticeTitile.value == '' || noticeContent == '') {
		ElMessage.warning('请完善公告内容')
		return
	}
	try {
		addNoticeHttp({
			title: noticeTitile.value,
			content: noticeContent.value,
			time: new Date().toLocaleString,
		}).then((res) => {
			if (res.code == 200) {
				dialogOverflowVisible.value = false
				//清空公告表单
				noticeTitile.value = ''
				noticeContent.value = ''
				ElMessage.success('发布成功')
			}
		})
	} catch (err) {
		ElMessage.error('发布失败')
	}
}
onMounted(() => {
	map = proxy.$map
})
</script>

<style lang="scss" scoped>
.cart {
	padding: 0 20px;
}
.cart .notice {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}
.cart .notice span {
	display: inline-block;
	font-weight: 550;
	margin-bottom: 10px;
}
</style>
